<template>
  <section>
    <div class="recommend-title">热门推荐</div>
    <ul>
      <router-link
      tag="li"
      :to="'/detail/' + item.id"
      class="recommend-item border-bottom"
      v-for="item of list"
      :key="item.id"
      >
        <img class="recommend-img" :src="item.imgUrl" alt="#">
        <div class="recommend-info">
          <p class="recommend-info-title">{{item.title}}</p>
          <p class="recommend-info-desc">{{item.desc}}</p>
          <button>查看详情</button>
        </div>
      </router-link>
    </ul>
  </section>
</template>
<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/minins.styl'
  .recommend-title
    background: #eee
    font-size: 1.4rem
    line-height: 2.5rem
    text-indent: 1.0rem
  ul
    margin-left: 1rem
  .recommend-item
    display: flex
    height: 8.8rem
    padding-top: .83rem
    padding-bottom: .83rem
  .recommend-img
    width: 8.34rem
    height: 8.34rem
  .recommend-info
    flex: 1
    min-width: 0
    height: 8.34rem
    padding-left: 1.0rem
  .recommend-info-title
    ellipsis()
    font-size: 1.8rem
    margin-top: 1.0rem
  .recommend-info-desc
    ellipsis()
    font-size: 1.2rem
    color: #ccc
    margin-top: 1.0rem
    margin-bottom: 1.3rem
  .recommend-info button
    border-radius: .3rem
    background: #ff9300
    margin-bottom: .1rem
</style>
